<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="js/vue.js"></script>
		<script src="js/elementui.js"></script>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
		<!--axios用向前端发送请求-->
		<script src="js/axios.min.js"></script>
		<title></title>
	</head>
	<body style="background-color: lightgoldenrodyellow;">
		<div id="box" style="width: 500px;height: 400px;margin: auto;text-align: center;border: 1px solid darkgray;border-radius: 10%;padding: 20px;" >
			<h2>登陆页</h2>
			<el-form :model="ruleForm" status-icon ref="ruleForm" label-width="60px" class="demo-ruleForm">
					<el-form-item label="用户名" prop="uname">
						<el-input type="text" v-model="ruleForm.uname" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="密码" prop="upwd">
						<el-input type="password" v-model="ruleForm.upwd" autocomplete="off"></el-input>
					</el-form-item>
					
			 
				<el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
			    <el-button @click="resetForm('ruleForm')">重置</el-button>
			  </el-form-item>
			</el-form>
		</div>
	</body>
	<script>
		new Vue({
			el:"#box",
			data:{
				ruleForm: {
					uname:'',
				    upwd: ''
				}
			},
			methods: {
			    submitForm(formName) {
			        this.$refs[formName].validate((valid) => {
			          if (valid) {
			            //alert(JSON.stringify(this.ruleForm));
						axios.post("http://localhost:8080/m/login2",this.ruleForm).then(res=> {
								this.ruleForm=res.data
								console.log(res)
								if(res.data.code==200){
									let token=res.data.data.token
									//alert(token)
									//把token存到本地存储
									window.localStorage.setItem("token",token)
									location.href="classCase.html"
								}else{
									alert("登陆失败")
								}
							}).catch(err => {
							console.log(err)
						});
			        } else {
			            console.log('error submit!!');
			            return false;
			        }
			    });
			    },
			    resetForm(formName) {
			        this.$refs[formName].resetFields();
			    }
			}
		})
	</script>
</html>
